<template>
  <div :class="$style.container">
    <h2>一、前端部分</h2>
    <p :class="$style.content">
      <b>Vue.js</b>及<b>Vue-cli</b>工程化构建的前端项目。
    </p>
    <h3>1、组件列表</h3>
    <ul>
      <li v-for="(v, k) in frontList" :key="k">
        <b>{{ v.name }}</b> —— {{ v.des }}
      </li>
    </ul>
    <br />
    <h3>2、数据渲染</h3>
    <p :class="$style.content">结合高德地图开放平台提供的API进行数据渲染。</p>
    <br />
    <h2>二、后端部分</h2>
    <h3>1、后端语言</h3>
    <ul>
      <li v-for="(v, k) in backList" :key="k">
        <b>{{ v.name }}</b> —— {{ v.des }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      frontList: [
        {
          name: 'Vue-Amap',
          des: '第三方高德地图API（Vue版本）'
        },
        {
          name: 'Axios',
          des: '网络请求组件'
        },
        {
          name: 'Vue-Router|Vuex',
          des: 'Vue生态组件'
        },
        {
          name: 'Lodash',
          des: 'JS工具库'
        },
        {
          name: 'Ant Design Vue',
          des: '阿里团队开源的Vue生态UI组件库'
        }
      ],
      backList: [
        {
          name: 'Python',
          des: '操作HBase'
        },
        {
          name: 'Golang',
          des: '操作mysql及Elasticsearch'
        },
        {
          name: 'Java',
          des: '操作redis'
        }
      ]
    }
  }
}
</script>

<style lang="scss" module>
@import '../common/common.scss';
.content {
  font-size: 16px;
}
.font-bold {
  font: bold;
}
.list {
  font-size: 14px;
}
</style>
